<template>
  <div id="meetingRoomm4" v-loading="loading">
    <div class="cancelPop" v-if="dialogVisible" :style="cancelPopStyle">
      <p class="title">确定取消排座?</p>
      <p>
        <span class="bt2" @click="comfirmClick">确定</span
        ><span class="bt1" @click="dialogVisible = false">取消</span>
      </p>
    </div>
    <div
      class="reserveSeatlPop"
      v-if="reserveSeatVisible"
      :style="reserveSeatStyle"
    >
      <p class="title">确定占位?</p>
      <p>
        <span class="bt2" @click="reserveSeatcomfirmClick()">确定</span
        ><span class="bt1" @click="reserveSeatVisible = false">取消</span>
      </p>
    </div>
    <div class="memberList">
      <p class="title">报名人员</p>
      <div class="listTree">
        <el-tree
          v-if="members.length>0"
          show-checkbox
          class="filter-tree"
          :data="members"
          node-key="id"
          :props="defaultProps"
          @check-change="handleCheckChange"
          ref="tree"
          :key="treeKey"
        >
        </el-tree>
      </div>
    </div>
    <div
      class="main"
      ref="main"
      @mousedown="startSelection"
      @mouseup="endSelection"
      @mousemove="updateSelection"
    >
      <p class="title">市行政中心3楼多功能会议室座位表</p>
      <div
        class="selection-box"
        v-if="isSelecting"
        :style="selectionBoxStyle"
      ></div>
      <div class="content">
        <div class="listBox">
          <div
            v-for="(item, index) in seatData.slice(0, 143)"
            :key="index"
            :id="item.id"
            class="seat"
            :class="item.selected ? 'selected' : ''"
            @contextmenu.prevent="
              item.state == 1
                ? selecteCell($event, index, item)
                : item.id !== ''
                ? reserveSeat($event, index, item)
                : ''
            "
          >
            {{ item.member != null ? item.member.name : item.id }}
          </div>
        </div>
      </div>
    </div>
    <div class="operateDiv">
      <!-- <el-input
        :title="meetingTitle"
        v-model="meetingTitle"
        placeholder="请输入会议标题"
      ></el-input> -->
      <span class="rowSeat" @click="rowSeat()">排座</span>
      <span class="saveAsImage" @click="saveAsImage">保存图片</span>
      <span class="printInfo" @click="print">打印</span>
      <span class="sellectAll" v-if="sellectAllSeat" @click="sellectAll">全选座位</span>
      <span
        v-if="selecteCells.length > 0"
        class="reserveSeatMore"
        @click="reserveSeatMore"
        >占座</span
      >
      <span class="saveInfo" @click="saveInfo">保存座位表</span>
      <!-- <span class="cancelRowSeat" @click="cancelRowSeat()">取消排座</span> -->
    </div>
  </div>
</template>

<script>
// 引入 html2canvas
import html2canvas from "html2canvas";
import {
  getDeptMember,
  saveOrUpdateRowSeat,
  findRowSeatByMeetingId,
} from "@/apis/common.js";
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      sellectAllSeat: true,//座位全选
      loading: true,//加载状态
      treeKey:0,//渲染人员树
      id: "", //用来判断是否是新增或编辑
      // meetingTitle: "", //会议标题
      meetingId: "", //会议id
      members: [
        {
          id: "1",
          name: "研发部",
          memberList: [
            { id: "-1", name: "人员1",checkable: false },
            { id: "-2", name: "人员2" },
            { id: "-3", name: "人员3" },
            { id: "-4", name: "人员4" },
            { id: "-5", name: "人员5" },
            { id: "-6", name: "人员6" },
            { id: "-7", name: "人员3" },
            { id: "-8", name: "人员4" },
            { id: "-9", name: "人员5" },
            { id: "-10", name: "人员6" },
            { id: "-11", name: "人员3" },
            { id: "-12", name: "人员4" },
            { id: "-13", name: "人员5" },
            { id: "-14", name: "人员6" },
            { id: "-15", name: "人员3" },
            { id: "-16", name: "人员4" },
            { id: "-17", name: "人员5" },
            { id: "-18", name: "人员6" },
            { id: "-19", name: "人员3" },
            { id: "-20", name: "人员4" },
          ],
        },
      ], // 报名的人员列表
      defaultProps: {
        children: "memberList",
        label: "name" || "deptName",
      },
      seatDataMember: [], // 已排座人员
      selectedMember: [], // 选中的成员
      seatData: [
        { member: null, id: "14", state: 0, selected: false },
        { member: null, id: "12", state: 0, selected: false },
        { member: null, id: "10", state: 0, selected: false },
        { member: null, id: "8", state: 0, selected: false },
        { member: null, id: "6", state: 0, selected: false },
        { member: null, id: "4", state: 0, selected: false },
        { member: null, id: "2", state: 0, selected: false },
        { member: null, id: "1", state: 0, selected: false },
        { member: null, id: "3", state: 0, selected: false },
        { member: null, id: "5", state: 0, selected: false },
        { member: null, id: "7", state: 0, selected: false },
        { member: null, id: "9", state: 0, selected: false },
        { member: null, id: "11", state: 0, selected: false },
        { member: null, id: "13", state: 0, selected: false },
        { member: null, id: "15", state: 0, selected: false },

        { member: null, id: "29", state: 0, selected: false },
        { member: null, id: "27", state: 0, selected: false },
        { member: null, id: "25", state: 0, selected: false },
        { member: null, id: "23", state: 0, selected: false },
        { member: null, id: "21", state: 0, selected: false },
        { member: null, id: "19", state: 0, selected: false },
        { member: null, id: "17", state: 0, selected: false },
        { member: null, id: "16", state: 0, selected: false },
        { member: null, id: "18", state: 0, selected: false },
        { member: null, id: "20", state: 0, selected: false },
        { member: null, id: "22", state: 0, selected: false },
        { member: null, id: "24", state: 0, selected: false },
        { member: null, id: "26", state: 0, selected: false },
        { member: null, id: "28", state: 0, selected: false },
        { member: null, id: "30", state: 0, selected: false },

        { member: null, id: "44", state: 0, selected: false },
        { member: null, id: "42", state: 0, selected: false },
        { member: null, id: "40", state: 0, selected: false },
        { member: null, id: "38", state: 0, selected: false },
        { member: null, id: "36", state: 0, selected: false },
        { member: null, id: "34", state: 0, selected: false },
        { member: null, id: "32", state: 0, selected: false },
        { member: null, id: "31", state: 0, selected: false },
        { member: null, id: "33", state: 0, selected: false },
        { member: null, id: "35", state: 0, selected: false },
        { member: null, id: "37", state: 0, selected: false },
        { member: null, id: "39", state: 0, selected: false },
        { member: null, id: "41", state: 0, selected: false },
        { member: null, id: "43", state: 0, selected: false },
        { member: null, id: "45", state: 0, selected: false },

        { member: null, id: "59", state: 0, selected: false },
        { member: null, id: "57", state: 0, selected: false },
        { member: null, id: "55", state: 0, selected: false },
        { member: null, id: "53", state: 0, selected: false },
        { member: null, id: "51", state: 0, selected: false },
        { member: null, id: "49", state: 0, selected: false },
        { member: null, id: "47", state: 0, selected: false },
        { member: null, id: "46", state: 0, selected: false },
        { member: null, id: "48", state: 0, selected: false },
        { member: null, id: "50", state: 0, selected: false },
        { member: null, id: "52", state: 0, selected: false },
        { member: null, id: "54", state: 0, selected: false },
        { member: null, id: "56", state: 0, selected: false },
        { member: null, id: "58", state: 0, selected: false },
        { member: null, id: "60", state: 0, selected: false },

        { member: null, id: "74", state: 0, selected: false },
        { member: null, id: "72", state: 0, selected: false },
        { member: null, id: "70", state: 0, selected: false },
        { member: null, id: "68", state: 0, selected: false },
        { member: null, id: "66", state: 0, selected: false },
        { member: null, id: "64", state: 0, selected: false },
        { member: null, id: "62", state: 0, selected: false },
        { member: null, id: "61", state: 0, selected: false },
        { member: null, id: "63", state: 0, selected: false },
        { member: null, id: "65", state: 0, selected: false },
        { member: null, id: "67", state: 0, selected: false },
        { member: null, id: "69", state: 0, selected: false },
        { member: null, id: "71", state: 0, selected: false },
        { member: null, id: "73", state: 0, selected: false },
        { member: null, id: "75", state: 0, selected: false },

        { member: null, id: "89", state: 0, selected: false },
        { member: null, id: "87", state: 0, selected: false },
        { member: null, id: "85", state: 0, selected: false },
        { member: null, id: "83", state: 0, selected: false },
        { member: null, id: "81", state: 0, selected: false },
        { member: null, id: "79", state: 0, selected: false },
        { member: null, id: "77", state: 0, selected: false },
        { member: null, id: "76", state: 0, selected: false },
        { member: null, id: "78", state: 0, selected: false },
        { member: null, id: "80", state: 0, selected: false },
        { member: null, id: "82", state: 0, selected: false },
        { member: null, id: "84", state: 0, selected: false },
        { member: null, id: "86", state: 0, selected: false },
        { member: null, id: "88", state: 0, selected: false },
        { member: null, id: "90", state: 0, selected: false },

        { member: null, id: "104", state: 0, selected: false },
        { member: null, id: "102", state: 0, selected: false },
        { member: null, id: "100", state: 0, selected: false },
        { member: null, id: "98", state: 0, selected: false },
        { member: null, id: "96", state: 0, selected: false },
        { member: null, id: "94", state: 0, selected: false },
        { member: null, id: "92", state: 0, selected: false },
        { member: null, id: "91", state: 0, selected: false },
        { member: null, id: "93", state: 0, selected: false },
        { member: null, id: "95", state: 0, selected: false },
        { member: null, id: "97", state: 0, selected: false },
        { member: null, id: "99", state: 0, selected: false },
        { member: null, id: "101", state: 0, selected: false },
        { member: null, id: "103", state: 0, selected: false },
        { member: null, id: "105", state: 0, selected: false },

        { member: null, id: "119", state: 0, selected: false },
        { member: null, id: "117", state: 0, selected: false },
        { member: null, id: "115", state: 0, selected: false },
        { member: null, id: "113", state: 0, selected: false },
        { member: null, id: "111", state: 0, selected: false },
        { member: null, id: "109", state: 0, selected: false },
        { member: null, id: "107", state: 0, selected: false },
        { member: null, id: "106", state: 0, selected: false },
        { member: null, id: "108", state: 0, selected: false },
        { member: null, id: "110", state: 0, selected: false },
        { member: null, id: "112", state: 0, selected: false },
        { member: null, id: "114", state: 0, selected: false },
        { member: null, id: "116", state: 0, selected: false },
        { member: null, id: "118", state: 0, selected: false },
        { member: null, id: "120", state: 0, selected: false },

        { member: null, id: "134", state: 0, selected: false },
        { member: null, id: "132", state: 0, selected: false },
        { member: null, id: "130", state: 0, selected: false },
        { member: null, id: "128", state: 0, selected: false },
        { member: null, id: "126", state: 0, selected: false },
        { member: null, id: "124", state: 0, selected: false },
        { member: null, id: "122", state: 0, selected: false },
        { member: null, id: "121", state: 0, selected: false },
        { member: null, id: "123", state: 0, selected: false },
        { member: null, id: "125", state: 0, selected: false },
        { member: null, id: "127", state: 0, selected: false },
        { member: null, id: "129", state: 0, selected: false },
        { member: null, id: "131", state: 0, selected: false },
        { member: null, id: "133", state: 0, selected: false },
        { member: null, id: "135", state: 0, selected: false },
      ], // 固定座位
      isSelecting: false, //是否在拖拽
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      selecteCells: [], //选中的座位
      dialogVisible: false, //取消排座弹窗
      reserveSeatVisible: false, //占位弹窗
      cancelPopStyle: {}, //取消排座弹窗样式
      reserveSeatStyle: {}, //占位弹窗样式
      cancelSignSeat: {
        index: null, //取消的座位索引
      }, //取消单个排座座位
      reserveSeatSignSeat: {
        index: null, //占位的座位索引
      }, //占位座位
    };
  },
  mounted() {
    // 获取当前 URL
    const url = new URL(document.location.href);
    const params = new URLSearchParams(url.search);
    // 获取参数值
    const meetingId = params.get("meetingId");
    if (meetingId) {
      this.meetingId = meetingId;
    }
    this.getMemmber();
    this.getRowSeatByMeetingId();
  },
  computed: {
    selectionBoxStyle() {
      const width = Math.abs(this.endX - this.startX);
      const height = Math.abs(this.endY - this.startY);
      const left = Math.min(this.startX, this.endX);
      const top = Math.min(this.startY, this.endY);

      return {
        width: `${width}px`,
        height: `${height}px`,
        left: `${left}px`,
        top: `${top}px`,
        position: "fixed",
        border: "1px dashed #000",
        backgroundColor: "rgba(0, 0, 255, 0.2)",
        pointerEvents: "none",
      };
    },
  },
  watch: {
    seatData: {
      handler(newVal) {
        if(newVal.findIndex((item) => item.selected == true) != -1){
          return
        }
        let result = [];
        newVal.forEach((item,index) => {
            if(item.member && item.member.id){
              console.log('index',index)
                this.members.forEach((department, departmentIndex) => {
                const memberIndex = department.memberList.findIndex(member => member.id == item.member.id);
                console.log('memberIndex',memberIndex)
                if (memberIndex !== -1) {
                    result.push({ departmentIndex, memberIndex });
                }
              });
            }
        })
        this.members.forEach((item,departmentIndex) => {
          item.memberList.forEach((member, memberIndex) => {
            this.members[departmentIndex].memberList[memberIndex].disabled = false;
          });
        })
        result.forEach((item) => {
          this.members[item.departmentIndex].memberList[item.memberIndex].disabled = true
        })
        this.treeKey += 1;
      },
      deep: true,
    },
  },
  methods: {
     // 座位全选
    sellectAll(){
      this.sellectAllSeat = true;
      console.log('座位全选')
        this.seatData.forEach((item,index) => {
          if(item.state == 0 && item.id != ''){
            item.selected = 1;
            this.selecteCells.push(item)
          }
        })
    },
    //右键单个座位选择
    selecteCell(e, index, item) {
      this.cancelSignSeat.index = index;
      console.log(e, index, item);
      this.dialogVisible = true;
      this.cancelPopStyle = {
        top: `${e.clientY - 50}px`,
        left: `${e.clientX - 30}px`,
      };
    },
    // 右键占位选择
    reserveSeat(e, index, item) {
      console.log("占位");
      this.reserveSeatSignSeat.index = index;
      this.reserveSeatVisible = true;
      this.reserveSeatStyle = {
        top: `${e.clientY - 50}px`,
        left: `${e.clientX - 30}px`,
      };
    },
    //确定取消排座
    comfirmClick() {
      this.dialogVisible = false;
      this.seatData[this.cancelSignSeat.index].state = 0;
      this.seatData[this.cancelSignSeat.index].member = null;
    },
    // 确定占位
    reserveSeatcomfirmClick() {
      console.log("占位确定");
      this.reserveSeatVisible = false;
      this.seatData[this.reserveSeatSignSeat.index].state = 1;
      this.seatData[this.reserveSeatSignSeat.index].member = {
        name: "已占座",
      };
    },
     // 保存图片
    saveAsImage() {
      console.log("保存图片");
      const element = this.$refs.main; // 获取要保存的元素
      html2canvas(element)
      .then((canvas) => {
        const dataURL = canvas.toDataURL("image/png"); // 将 canvas 转换为图片 URL

        if (window.navigator.msSaveBlob) {
          // IE 处理
          const byteString = atob(dataURL.split(",")[1]);
          const mimeString = dataURL.split(",")[0].split(":")[1].split(";")[0];
          const ab = new ArrayBuffer(byteString.length);
          const ia = new Uint8Array(ab);
          
          for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
          }

          const blob = new Blob([ab], { type: mimeString });
          window.navigator.msSaveBlob(blob, "会议室座位表.png");
        } else {
          // 其他浏览器
          const link = document.createElement("a");
          link.href = dataURL; // 设置链接地址
          link.download = "会议室座位表.png"; // 设置下载的文件名
          link.click(); // 模拟点击链接
        }
      })
      .catch((error) => {
        console.error("生成图片时出错:", error); // 捕获错误
      });
    },
    // 保存座位表
    async saveInfo() {
      console.log("保存座位表", this.seatData);
      if (this.id) {
        await saveOrUpdateRowSeat({
          meetingId: this.meetingId,
          // meetingName: this.meetingTitle,
          rowSeatData: JSON.stringify(this.seatData),
          id: this.id,
          type: this.type,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("保存信息成功");
          } else {
            this.$message.error("保存信息失败");
          }
          console.log("保存座位表res>>>>>>>>>>>>>", res);
        });
      } else {
        await saveOrUpdateRowSeat({
          meetingId: this.meetingId,
          // meetingName: this.meetingTitle,
          rowSeatData: JSON.stringify(this.seatData),
          type: this.type,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("保存信息成功");
          } else {
            this.$message.error("保存信息失败");
          }
          console.log("保存座位表res>>>>>>>>>>>>>", res);
        });
      }
    },
    // 打印
    print() {
      window.print();
    },
    // 多个座位占座
    reserveSeatMore() {
      console.log("占座多个座位", this.selecteCells);
      this.selecteCells.forEach((item) => {
        let index = this.seatData.findIndex((it) => {
          return it.id == item.id;
        });
        this.seatData[index].member = { name: "已占座" };
        this.seatData[index].state = 1;
      });
      this.seatData.forEach((item) => {
        item.selected = false;
      });
      this.selecteCells = []
    },
    handleCheckChange(data, checked, indeterminate) {
      let arr = this.$refs.tree.getCheckedNodes();
      this.selectedMember = arr.filter((item) => {
        return !item.memberList;
      });
      console.log(this.selectedMember);
    },
    startSelection(event) {
      event.preventDefault();
      this.isSelecting = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.endX = event.clientX;
      this.endY = event.clientY;

      // Reset selection
      this.seatData.forEach((item) => (item.selected = false));
    },
    updateSelection(event) {
      if (this.isSelecting) {
        this.selecteCells = [];
        this.endX = event.clientX;
        this.endY = event.clientY;
        this.selectSeats();
      }
    },
    endSelection() {
      this.isSelecting = false;
    },
    selectSeats() {
      const selectionRect = {
        left: Math.min(this.startX, this.endX),
        top: Math.min(this.startY, this.endY),
        right: Math.max(this.startX, this.endX),
        bottom: Math.max(this.startY, this.endY),
      };
      this.seatData.forEach((item) => {
        const seatElement = document.getElementById(item.id);
        if (seatElement) {
          const rect = seatElement.getBoundingClientRect();
          if (
            rect.left >= selectionRect.left &&
            rect.right <= selectionRect.right &&
            rect.top >= selectionRect.top &&
            rect.bottom <= selectionRect.bottom &&
            !item.state
          ) {
            item.selected = true;
            this.selecteCells.push(item);
          } else {
            item.selected = false;
          }
        }
      });
    },
    async getMemmber() {
      await getDeptMember({ meetingId: this.meetingId }).then((res) => {
        console.log("报名人员>>>>>>>>>>>>>>>", res);
        if (res.code == 200) {
          this.members = res.data;
        }
      });
    },
    async getRowSeatByMeetingId() {
      await findRowSeatByMeetingId({
        meetingId: this.meetingId,
        type: this.type,
      }).then((res) => {
        console.log("获取会议室排座信息>>>>>>>>>>>>>>>", res);
        if (res.code == 200 && res.data !== []) {
          res.data.type == this.type
            ? (this.seatData = JSON.parse(res.data.rowSeatData))
            : "";
          // this.meetingTitle = res.data.meetingRoomName;
          if (res.data.id) {
            this.id = res.data.id;
          }
          console.log(
            "获取会议室排座信息this.seatData>>>>>>>>>>>>>>>",
            this.seatData
          );
           
        }
        setTimeout(()=>{
            this.loading = false
          },500)
      });
    },
    // 排座
    rowSeat() {
      this.selecteCells.sort((a, b) => parseInt(a.id) - parseInt(b.id));
      console.log("选中的座位", this.selecteCells);
      let indexArr = [];
      this.selecteCells.forEach((cell) => {
        indexArr.push(
          this.seatData.findIndex((itemCell) => {
            return itemCell.id == cell.id;
          })
        );
      });
      this.selectedMember.forEach((item, index) => {
        if (this.seatData[indexArr[index]]) {
          this.seatData[indexArr[index]].member = item;
          this.seatData[indexArr[index]].state = 1;
          this.seatDataMember.push(item);
        }
      });
      console.log("座位数据", this.seatData);
      // this.members.forEach((dept) => {
      //   dept.memberList = dept.memberList.filter(
      //     (member) => !this.seatDataMember.includes(member)
      //   );
      // });
      this.resetChecked();
      this.seatData.forEach((item) => {
        item.selected = false;
      });
      console.log("选中的人员", this.selectedMember);
      console.log("已排座人员", this.seatDataMember);
      console.log("未排座人员", this.members);
    },
    // 取消排座
    cancelRowSeat() {},
    // 清空树形控件选中数据
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
  },
};
</script>

<style lang="less">
@import "../style/index.less";
#meetingRoomm4 {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  display: flex;
  .reserveSeatlPop,
  .cancelPop {
    padding: 2px 5px;
    width: 100px;
    height: 44px;
    position: fixed;
    z-index: 999;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
    .title {
      font-size: 12px;
      line-height: 20px;
    }
    .bt1 {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 2px 3px;
      float: right;
      font-size: 12px;
      border-radius: 4px;
    }
    .bt2 {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      float: right;
      outline: none;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 2px 3px;
      font-size: 12px;
      border-radius: 4px;
      margin-left: 5px;
    }
  }
  .memberList {
    width: 150px;
    height: 100%;
    position: relative;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    overflow: auto;
    .title {
      line-height: 40px;
      height: 40px;
      text-align: center;
      font-size: 18px;
    }
    .listTree {
      flex: 1;
    }
  }
  .main {
    flex: 1;
    min-width: 1200px;
    padding: 0 20px;
    .title {
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 28px;
    }
  }
  .operateDiv {
    min-width: 150px;
    position: relative;
    border: 1px solid #ccc;
    padding: 10px;
    .el-input {
      width: 130px;
      input {
        padding: 0 5px;
        height: 36px;
        line-height: 36px;
      }
    }
    .saveAsImage,
    .rowSeat,
    .printInfo,
    .reserveSeatMore,
    .sellectAll,
    .saveInfo {
      text-align: center;
      display: block;
      margin: 5px 0px;
      padding: 2px 4px;
      background-color: rgba(167, 167, 190, 0.2);
      border-radius: 6px;
      cursor: pointer;
    }
  }

  .content {
    width: 100%;
    height: 740px;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    .first-row {
      width: 100%;
      flex: 1;
      display: flex;
      .seat {
        width: 6.6666%;
        height: 100%;
      }
    }
    .listBox {
      flex: 8;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .seat {
        width: 6.66666%;
        height: 11.111%;
      }
    }
  }
  .seat {
     display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 16.66666%;
    border: 1px solid #000;
    text-align: center;
    overflow: hidden;
  }
  .selection-box {
    position: absolute;
    border: 1px dashed #000;
    background-color: rgba(0, 0, 255, 0.2);
    pointer-events: none;
  }
  .seat.selected {
    background-color: yellow; /* 选中座位的样式 */
  }
}
</style>
<style  scoped>
/* 打印样式 */
@media print {
  body * {
    visibility: hidden; /* 隐藏所有元素 */
  }
  .main,
  .main * {
    visibility: visible; /* 仅显示指定区域 */
  }
  .main {
    position: absolute; /* 防止其他元素影响打印布局 */
    left: 0;
    top: 0;
  }
}
</style>

